@directive dynamic status;
@var content = {
<div class="panel panel-success">
    <div class="panel-body">
        <form action="#" method="POST" class="form-horizontal" role="form" id="add-form">
            <div class="form-group">
                <label class="col-sm-2 control-label">名称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="name" name="name"
                           placeholder="输入名称" required data-bv-notempty-message="用户名不为空"
                           pattern="^.{2,100}$" data-bv-regexp-message="用户名在两到一百个字符之间"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">开始时间</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="startingTime" name="startingTime"
                           placeholder="选择开始时间" required data-bv-notempty-message="选择开始时间" autocomplete="off"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">结束时间</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="endTime" name="endTime"
                           placeholder="选择结束时间" required data-bv-notempty-message="选择结束时间" autocomplete="off"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">状态</label>
                <div class="col-sm-8">
                    <div class="radio">
                        @for(s in status){
                        <label>
                            <input type="radio" required name="status" id="status{s.value}" value="${s.value}"
                                   data-bv-notempty-message="请选择状态"/>
                            ${s.name}
                        </label>
                        @}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">内容</label>
                <div class="col-sm-8">
                    <textarea name="contentEditor" id="contentEditor" class="form-control" rows="2"></textarea>
                    <input type="hidden" name="content" id="content" value=""/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">规则</label>
                <div class="col-sm-8">
                    <textarea name="ruleEditor" id="ruleEditor" class="form-control" rows="2"></textarea>
                    <input type="hidden" name="rule" id="rule" value=""/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">注意事项</label>
                <div class="col-sm-8">
                    <textarea name="precautionsEditor" id="precautionsEditor" class="form-control" rows="2"></textarea>
                    <input type="hidden" name="precautions" id="precautions" value=""/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">备注</label>
                <div class="col-sm-8">
                    <textarea name="remarkEditor" id="remarkEditor" class="form-control" rows="2"></textarea>
                    <input type="hidden" name="remark" id="remark" value=""/>
                </div>
            </div>
            <div class="form-group" id="awards-vue">
                <label class="col-sm-2 control-label">
                    奖项
                    <button class="btn btn-sm btn-primary" onclick="view.addAward()">
                        <i class="glyphicon glyphicon-plus"></i>
                    </button>
                </label>
                <div class="col-sm-12">
                    <input type="hidden" name="awards" id="awards" value="[]"/>
                    <div class="table-responsive">
                        <table class="table table-hover table-no-left-right-border">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>昵称</th>
                                <th>中奖概率</th>
                                <th>优惠金额</th>
                                <th>优惠折扣</th>
                                <th>奖品数量</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(a,i) in awards">
                                <td>
                                    <input type="text" class="form-control" v-model="a.name" placeholder="奖项名称">
                                </td>
                                <td>
                                    <input type="text" class="form-control" v-model="a.nick" placeholder="奖项昵称">
                                </td>
                                <td>
                                    <input type="number" class="form-control" v-model="a.probability"
                                           placeholder="中奖概率">
                                </td>
                                <td>
                                    <input type="number" class="form-control" v-model="a.amount" placeholder="为0代表无优惠">
                                </td>
                                <td>
                                    <input type="number" class="form-control" v-model="a.discount" placeholder="为0代表无折扣">
                                </td>
                                <td>
                                    <input type="number" class="form-control" v-model="a.number" placeholder="为0代表无限">
                                </td>
                                <td>
                                    <input type="text" class="form-control" v-model="a.remark" placeholder="备注">
                                </td>
                                <td>
                                    <a style="line-height: 30px;vertical-align: middle;" href="javascript:void(0);"
                                       :onclick="['view.deleteAward(' + i + ')']">删除</a>
                                </td>
                            </tr>
                            <tr v-show="awards.length < 1">
                                <td colspan="8" class="text-center">
                                    暂无奖项，请点击【+】按钮添加，注意所有奖项中奖概率必须等于100
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="text-center col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
                <button class="btn btn-success" id="btn-add" onclick="view.submit();">添加</button>
                <button class="btn btn-warning" id="btn-close" onclick="parent.table.bootstrapTableExtension('close');">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        view.init();
    });
    var view = {
        contentEditor: null,
        ruleEditor: null,
        precautionsEditor: null,
        remarkEditor: null,
        awardsVue: null,
        init: function () {
            laydate.render({
                elem: '#startingTime', //指定元素
                type: 'datetime',
                trigger: 'click',
                done: function (value, date) {
                    $('#startingTime').val(value);
                    $('#add-form').data('bootstrapValidator').updateStatus('startingTime', 'VALIDATED');
                    $('#add-form').data('bootstrapValidator').validateField('startingTime');
                }
            });
            laydate.render({
                elem: '#endTime', //指定元素
                type: 'datetime',
                trigger: 'click',
                done: function (value, date) {
                    $('#endTime').val(value);
                    $('#add-form').data('bootstrapValidator').updateStatus('endTime', 'VALIDATED');
                    $('#add-form').data('bootstrapValidator').validateField('endTime');
                }
            });
            $('#add-form').bootstrapValidator({
                message: '值不能为空',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                }
            });

            $('#add-form').on('submit', function () {
                return false;
            });
            $('#parentMenuName').on('focus', function () {
                $('#modal-parent-menu').modal();
            });
            var toolbar = [
                ['Preview', '-', 'Templates'],
                ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
                ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
                ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                ['BidiLtr', 'BidiRtl'],
                ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
                ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
                ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                ['Link', 'Unlink', 'Anchor'],
                ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
                ['Styles', 'Format', 'Font', 'FontSize'],
                ['TextColor', 'BGColor'],
                ['Maximize', 'ShowBlocks']
            ];
            this.contentEditor = CKEDITOR.replace(document.getElementById("contentEditor"), {toolbar: toolbar});
            this.ruleEditor = CKEDITOR.replace(document.getElementById("ruleEditor"), {toolbar: toolbar});
            this.precautionsEditor = CKEDITOR.replace(document.getElementById("precautionsEditor"), {toolbar: toolbar});
            this.remarkEditor = CKEDITOR.replace(document.getElementById("remarkEditor"), {toolbar: toolbar});

            this.awardsVue = new Vue({
                el: '#awards-vue',
                data: {
                    awards: []
                }
            });
        },
        submit: function () {
            $('#add-form').data('bootstrapValidator').validate();
            var b = $('#add-form').data('bootstrapValidator').isValid();
            if (!b) {
                return false;
            }
            var files = $('#file').fileUpload('getUploadFiles');
            if (files.length > 0) {
                $('#avatar').val(files[files.length - 1].path);
            } else {
                $('#avatar').val('');
            }

            $('#content').val(this.contentEditor.getData());
            $('#rule').val(this.ruleEditor.getData());
            $('#precautions').val(this.precautionsEditor.getData());
            $('#remark').val(this.remarkEditor.getData());
            $('#add-form').data('bootstrapValidator').validate();

            if (this.awardsVue.awards.length < 1) {
                layer.msg('请添加活动奖项', {icon: 5});
                return false;
            }
            var f = false;
            var total = 0;
            this.awardsVue.awards.forEach(function (item) {
                if (item.name.length < 1 ||
                    item.nick.length < 1 ||
                    item.probability.length < 1 ||
                    item.amount.length < 1 ||
                    item.discount.length < 1 ||
                    item.remark.length < 1
                ) {
                    f = true;
                }
            });
            if (f) {
                layer.msg('请检查奖项有无空值', {icon: 5});
                return false;
            }

            this.awardsVue.awards.forEach(function (item) {
                total = total + parseFloat(item.probability);
            });
            console.log(total);
            if(total != 100){
                layer.msg('请检查奖项中奖概率之和是否为100', {icon: 5});
                return false;
            }

            $('#awards').val(JSON.stringify(this.awardsVue.awards));

            $('#btn-add').attr('disabled', 'disabled');
            $.ajax({
                url: '/fls/activity/add',
                type: 'post',
                dataType: 'json',
                data: $('#add-form').serialize(),
                success: function (data) {
                    if (data.status) {
                        layer.msg('添加活动成功', {icon: 1});
                        parent.table.bootstrapTable('refresh');
                        setTimeout(function () {
                            parent.table.bootstrapTableExtension('close');
                        }, 1500);
                    } else {
                        layer.msg(data.msg, {icon: 2});
                        $('#btn-add').removeAttr('disabled');
                    }
                },
                error: function () {
                    layer.msg('网络错误，请稍后再试', {icon: 5});
                    $('#btn-add').removeAttr('disabled');
                }
            });
        },
        addAward: function () {
            this.awardsVue.awards.push({
                id: null,
                activityId: null,
                name: '',
                nick: '',
                probability: '',
                amount: '',
                discount: '',
                remark: '',
                number:''
            });
        },
        deleteAward: function (i) {
            this.awardsVue.awards.splice(i, 1);
        }
    };
</script>
</div>
@};
@include('../../layout/_open_content.html',{content:content}){}